<script setup lang="ts">
// 使用路由
const router = useRouter();

// 组件Props
const props = defineProps({
    showHeaderSearchBox: {
        type: Boolean,
        default: false,
        required: true
    }
})

// 组件Emits
const emits = defineEmits(['hideHeaderSearchBox']);

// 隐藏搜索框
const hideHeaderSearchBox = () => {
    emits('hideHeaderSearchBox');
}

// 搜索关键词
const searchKeyWords = ref("");

// 回车确定搜索
const searchConfirmEnterHandle = () => {
    router.push(`/search/${searchKeyWords.value}`)
}
</script>

<template>
    <client-only>
        <div class="header-search-container">
            <t-dialog :visible="showHeaderSearchBox" header="全局搜索" width="50%" :confirm-btn="{
                content: '',
                variant: '',
            }" :cancel-btn="{
                content: '',
                variant: '',
            }" :on-close="hideHeaderSearchBox">

                <template #body>
                    <div class="search-box p-[50px]">
                        <t-input placeholder="请输入搜索关键词" size="large" inputClass="header-search-input-style"
                            v-model="searchKeyWords" :autofocus="true" clearable :onEnter="searchConfirmEnterHandle">
                            <template #suffixIcon>
                                <t-icon name="search" :style="{ cursor: 'pointer' }" />
                            </template>
                        </t-input>
                    </div>
                </template>

            </t-dialog>
        </div>
    </client-only>
</template>
<style scoped></style>